<template>
    <Page>
        <el-form ref="form" :model="form" label-width="140px">
            <Panel title="店铺信息">
                <el-form-item label="店铺照片" prop="storePic" :rules="[{required:true,message:'请输入营业执照',trigger:'blur'}]">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="/server/api/system/uploadFile"
                        :data="{}"
                        :style="{height:'120px',width:'180px'}"
                        :show-file-list="false"
                        :on-success="uploadSuccess"
                    >
                        <img v-if="form.storePic != ''" :src="form.storePic" width="180" height="120" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                    </el-upload>
                    <p style="line-height:20px;">店铺请务必上传彩色原件扫描件或数码照 否则影响结算，仅仅支持JPG,JPEG,PNG 的图片格式，且单张图片小于不超过2M。</p>
                </el-form-item>
                <el-form-item label="店铺名称" prop="storeName" :rules="[{required:true,message:'请输入店铺名称',trigger:'blur'}]">
                    <el-input v-model="form.storeName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址" prop="storeAddress" :rules="[{required:true,message:'请输入店铺地址',trigger:'blur'}]">
                    <el-input v-model="form.storeAddress" size="small"></el-input>
                </el-form-item>
                <el-form-item label="店铺电话" prop="storePhone" :rules="[{required:true,message:'请输入店铺电话',trigger:'blur'}]">
                    <el-input v-model="form.storePhone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="营业时间" prop="storeHours" :rules="[{required:true,message:'请输入营业时间',trigger:'blur'}]">
                    <el-input v-model="form.storeHours" size="small"></el-input>
                </el-form-item>
                <el-form-item label="经营商品" prop="storeGoods" :rules="[{required:true,message:'请输入经营商品',trigger:'blur'}]">
                    <el-input type="textarea" v-model="form.storeGoods" size="small"></el-input>
                </el-form-item>
            </Panel>
            <Panel title="联系人信息">
                <el-form-item label="申请人姓名" prop="applyName" :rules="[{required:true,message:'请输入申请人姓名',trigger:'blur'}]">
                    <el-input v-model="form.applyName" :disabled="true" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="mchAccount" :rules="[
                    {required:true,message:'请输入手机号码',trigger:'blur'},
                    {pattern:/^[1][3,4,5,6,7,8,9][0-9]{9}$/, message:'手机号码格式错误！',trigger:'blur'},
                ]">
                    <el-input v-model="form.mchAccount" :disabled="true" size="small"></el-input>
                    <p style="margin:0px 0px;line-height:23px;">注册信小胖企业用户需要用手机号码，此手机号码将作为您的账户名，具有唯一性，请正确填写！</p>
                </el-form-item>
            </Panel>
            <Panel title="资质信息">
                <el-form-item label="商户类型" prop="mchType" :rules="[{required:true,message:'请选择商户类型',trigger:'blur'}]">
                    {{mchTypeList[form.mchType]}}
                    <!--<el-radio-group v-model="form.mchType" @change="changeMchType">
                        <el-radio :label="index" :value="index" v-for="(item, index) in mchTypeList">{{item}}</el-radio>
                    </el-radio-group>-->
                </el-form-item>
                <el-form-item label="公司名称" prop="mchName" :rules="[{required:true,message:'请输入公司名称',trigger:'blur'}]">
                    <el-input v-model="form.mchName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="企业地址" prop="mchAreaName" :rules="[{required:true,message:'请输入企业地址',trigger:'blur'}]">
                    <el-cascader
                        v-model="areaCode"
                        size="small"
                        :clearable="true"
                        :options="areaList"
                        :props="{expandTrigger:'hover',value:'areaName',label:'areaName',children:'children'}"
                        @change="changeArea"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="mchAddress" :rules="[{required:true,message:'请输入详细地址',trigger:'blur'}]">
                    <el-input type="textarea" v-model="form.mchAddress" size="small"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="licenseNo" :rules="[{required:true,message:'请输入统一社会信用代码',trigger:'blur'}]">
                    <el-input v-model="form.licenseNo" size="small"></el-input>
                </el-form-item>
                <el-form-item label="营业执照" prop="licensePic" :rules="[{required:true,message:'请输入营业执照',trigger:'blur'}]">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="/server/api/system/uploadFile"
                        :show-file-list="false"
                        :on-success="uploadLicensePic"
                        :style="{height:'120px',width:'180px'}"
                    >
                        <img v-if="form.licensePic != ''" :src="form.licensePic" width="180" height="120" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                    </el-upload>
                    <p style="line-height:20px;">上传营业执照，复印件需要加盖公章</p>
                </el-form-item>
                <el-form-item label="法人姓名" prop="legalPerson" :rules="[{required:true,message:'请输入法人姓名',trigger:'blur'}]">
                    <el-input v-model="form.legalPerson" size="small"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证号码" prop="idCardNo" :rules="[
                    {required:true,message:'请输入法人身份证号码',trigger:'blur'},
                    {pattern:/^([1-6][1-9]|50)\d{4}(16|17|18|19|20|21|22)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message:'身份证号码格式错误！', trigger:'blur'}
                ]">
                    <el-input v-model="form.idCardNo" size="small"></el-input>
                </el-form-item>
                <el-form-item label="身份证(国徽页)" prop="idCardFront" :rules="[{required:true,message:'请上传身份证(正面)',trigger:'blur'}]">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="/server/api/system/uploadFile"
                        :show-file-list="false"
                        :on-success="uploadIdCardFront"
                        :style="{height:'120px',width:'180px'}"
                    >
                        <img v-if="form.idCardFront != ''" :src="form.idCardFront" width="180" height="120" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证(头像页)" prop="idCardBack" :rules="[{required:true,message:'请上传身份证(反面)',trigger:'blur'}]">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="/server/api/system/uploadFile"
                        :show-file-list="false"
                        :on-success="uploadIdCardBack"
                        :style="{height:'120px',width:'180px'}"
                    >
                        <img v-if="form.idCardBack != ''" :src="form.idCardBack" width="180" height="120" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                    </el-upload>
                </el-form-item>
            </Panel>
            <Panel title="银行账户">
                <div v-if="form.mchType == 11">
                    <el-form-item label="开户银行" prop="openingBank" :rules="[{required:true,message:'请输入开户银行',trigger:'blur'}]">
                        <el-input v-model="form.openingBank" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="银行开户人姓名" prop="bankAccountName" :rules="[{required:true,message:'请输入银行开户人姓名',trigger:'blur'}]">
                        <el-input v-model="form.bankAccountName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" prop="bankAccountNo" :rules="[{required:true,message:'请输入银行账号',trigger:'blur'}]">
                        <el-input v-model="form.bankAccountNo" size="small"></el-input>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item label="银行账户名称" prop="bankAccountName" :rules="[{required:true,message:'请输入银行账户名称',trigger:'blur'}]">
                        <el-input v-model="form.bankAccountName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" prop="bankAccountNo" :rules="[{required:true,message:'请输入银行账号',trigger:'blur'}]">
                        <el-input v-model="form.bankAccountNo" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="联行号" prop="bankChannelNo" :rules="[{required:true,message:'请输入联行号',trigger:'blur'}]">
                        <el-input v-model="form.bankChannelNo" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="开户许可证" prop="openingLicense" :rules="[{required:true,message:'请上传开户许可证',trigger:'blur'}]">
                        <el-upload
                            class="upload-demo"
                            drag
                            action="/server/api/system/uploadFile"
                            :show-file-list="false"
                            :on-success="uploadOpeningLicense"
                            :style="{height:'120px',width:'180px'}"
                        >
                            <img v-if="form.openingLicense != ''" :src="form.openingLicense" width="180" height="120" class="avatar">
                            <i v-else class="el-icon-upload"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="">
                        <el-checkbox v-model="agree">我已阅读并同意《信小胖服务条款》、《注册协议》、《隐私政策》和《法律声明》</el-checkbox>
                        <p style="margin:0px 25px;">审核时间需1-3个工作日，如有疑问请致电：090-0000000</p>
                    </el-form-item>
                </div>
            </Panel>
            <Panel title="">
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit('form')">提交</el-button>
                </el-form-item>
            </Panel>
        </el-form>
    </Page>
</template>

<script>
import Page from "@/components/page/Page";
import Panel from "@/components/panel/Panel";
export default {
    data(){
        return {
            form:{
                storePic:'',        // 店铺照片
                storeName:'',       // 店铺名称
                storeAddress:'',    // 店铺地址
                storePhone:'',      // 店铺电话
                storeHours:'',      // 营业时间
                storeGoods:'',      // 经营商品

                applyName:'',       // 申请人姓名
                mchAccount:'',      // 商户账号/手机号

                mchType:'11',       // 商户类型:10=个人,11=个体工商户,12=企业
                mchName:'',         // 公司名称/商户名称
                mchAreaName:'',     // 公司地址/商户地址
                mchAddress:'',      // 详细地址
                licenseNo:'',       // 统一社会信用代码
                licensePic:'',      // 营业执照
                legalPerson:'',     // 法人姓名
                idCardNo:'',        // 法人身份证号码
                idCardFront:'',     // 身份证正面
                idCardBack:'',      // 身份证反面

                openingBank:'',     // 开户银行
                bankAccountName:'', // 银行账户名称
                bankAccountNo:'',   // 银行账户卡号
                bankChannelNo:'',   // 联行号
                openingLicense:'',  // 开户行许可证
            },
            mchTypeList:{12:'企业',11:'个体工商户'},
            agree:false,
            areaCode:[],
            areaList:[],
        }
    },
    created() {
        this.getMerchantInfo(this.$route.query.mchNo);
    },
    mounted() {
        this.getAreaTree();
    },
    methods:{
        // 获取商户信息
        getMerchantInfo(mchNo = null){
            this.$http.get('/api/altmch/detail', {params:{mchNo}}).then(result => {
                if(result.code == 200){
                    this.areaCode = result.data.mchAreaName.split('-');
                    for (let i in result.data){
                        if(i == 'mchType'){
                            result.data['mchType'] = result.data['mchType'].toString();
                        }
                    }
                    this.form = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 提交数据
        onSubmit(form){
            this.$refs[form].validate((valid) => {
                if(valid){
                    this.$http.post('/api/altmch/modify', this.form).then(result => {
                        if(result.code == 200){
                            this.$message.success(result.msg);
                            this.$router.back();
                        }else{
                            this.$message.error(result.msg);
                        }
                    });
                }
            });
        },
        // 获取地址树
        getAreaTree(){
            this.$http.get('/api/system/areaTree', {}).then(result => {
                if(result.code == 200){
                    this.areaList = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 选择地区
        changeArea(e){
            this.form.mchAreaName = e.join('-');
        },
        // 切换商户类型
        changeMchType(e){
            ['mchName','mchAreaName','mchAddress','licenseNo','licensePic','legalPerson','idCardNo','idCardFront','idCardBack','bankAccountName','bankAccountNo','bankChannelNo','openingLicense'].forEach((item, index) => {});
            this.$refs.form.clearValidate();
        },
        // 店铺照片回调
        uploadSuccess(response, file, fileList){
            if(response.code == 200){
                this.form.storePic = response.data;
            }else{
                this.$message.error(response.msg);
            }
        },
        // 营业执照回调
        uploadLicensePic(response, file, fileList){
            if(response.code == 200){
                this.form.licensePic = response.data;
            }else{
                this.$message.error(response.msg);
            }
        },
        // 身份证正面
        uploadIdCardFront(response, file, fileList){
            if(response.code == 200){
                this.form.idCardFront = response.data;
            }else{
                this.$message.error(response.msg);
            }
        },
        // 身份证反面
        uploadIdCardBack(response, file, fileList){
            if(response.code == 200){
                this.form.idCardBack = response.data;
            }else{
                this.$message.error(response.msg);
            }
        },
        // 开户行许可证
        uploadOpeningLicense(response, file, fileList){
            if(response.code == 200){
                this.form.openingLicense = response.data;
            }else{
                this.$message.error(response.msg);
            }
        },
    },
    components:{
        Page,
        Panel
    },
}
</script>

<style lang="less" scoped>
::v-deep(.el-upload){
    .el-upload-dragger{
        height:120px;
        width:180px;
    }
}
</style>
